recompose

What is recompose?

Recompose is a React utility belt for function components and higher-order components (HOCs). It provides a set of helper functions to simplify the process of writing and managing HOCs, making it easier to enhance and compose components in a more declarative and functional style.

What are recompose's main functionalities?

withState

The `withState` HOC adds state to a functional component. In this example, it adds a `counter` state and a `setCounter` function to the `Counter` component.

const enhance = withState('counter', 'setCounter', 0);
const Counter = enhance(({ counter, setCounter }) => (
  <div>
    <p>{counter}</p>
    <button onClick={() => setCounter(counter + 1)}>Increment</button>
  </div>
));

withHandlers

The `withHandlers` HOC allows you to create handler functions that can be passed as props to the component. In this example, it creates an `onClick` handler that increments the `counter` state.

const enhance = withHandlers({
  onClick: ({ counter, setCounter }) => () => setCounter(counter + 1)
});
const Counter = enhance(({ counter, onClick }) => (
  <div>
    <p>{counter}</p>
    <button onClick={onClick}>Increment</button>
  </div>
));

compose

The `compose` function allows you to combine multiple HOCs into a single HOC. In this example, it combines `withState` and `withHandlers` to create an enhanced `Counter` component.

const enhance = compose(
  withState('counter', 'setCounter', 0),
  withHandlers({
    onClick: ({ counter, setCounter }) => () => setCounter(counter + 1)
  })
);
const Counter = enhance(({ counter, onClick }) => (
  <div>
    <p>{counter}</p>
    <button onClick={onClick}>Increment</button>
  </div>
));

branch

The `branch` HOC conditionally applies an HOC based on a predicate function. In this example, it renders a loading component if `isLoading` is true, otherwise it renders `MyComponent`.

const enhance = branch(
  ({ isLoading }) => isLoading,
  renderComponent(() => <div>Loading...</div>)
);
const MyComponent = enhance(({ data }) => (
  <div>{data}</div>
));

renderNothing

The `renderNothing` HOC renders nothing if the predicate function returns true. In this example, it renders nothing if `shouldRender` is false.

const enhance = branch(
  ({ shouldRender }) => !shouldRender,
  renderNothing
);
const MyComponent = enhance(({ data }) => (
  <div>{data}</div>
));

Other packages similar to recompose

react-hooks

React Hooks provide a way to use state and other React features without writing a class. They offer similar functionality to Recompose but are built into React itself, making them more integrated and easier to use in modern React applications.

redux

Redux is a state management library for JavaScript applications. While it is more complex and powerful than Recompose, it can be used to manage state and side effects in a way that complements React components.

mobx

MobX is a state management library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). It offers a different approach to state management compared to Recompose, focusing on observables and reactions.

react-redux

React-Redux is the official React binding for Redux. It provides a way to connect React components to a Redux store, offering a more structured approach to state management compared to Recompose.

README

recompose

Recompose is a React utility belt for function components and higher-order components. See the GitHub project page for more information.